<template>
  <d2-container>
    <div class="flex-1 mx-2">
      <el-form :model="formCoupon" label-width="100px" ref="form">
        <div style="width: 25%;" class="mt-3">
          <el-form-item label="优惠券名称" prop="title">
            <el-input size="medium" v-model="formCoupon.title" placeholder="优惠券名称"></el-input>
          </el-form-item>
        </div>
        <div>
          <el-form-item label="优惠券金额" prop="discount_amount">
            <el-input-number size="medium" v-model="formCoupon.discount_amount" :precision="2" :min="0"
              :step="0.01"></el-input-number>
          </el-form-item>
        </div>
        <div>
          <el-form-item label="满金额使用" prop="minimum_order_amount">
            <el-input-number size="medium" v-model="formCoupon.minimum_order_amount" :precision="2" :min="0"
              :step="0.01"></el-input-number>
          </el-form-item>
        </div>
        <div>
          <el-form-item label="派发数量" prop="coupon_count">
            <el-input-number size="medium" v-model="formCoupon.coupon_count" :min="0"></el-input-number>
          </el-form-item>
        </div>
        <div>
          <el-form-item label="开始日期" prop="start_datetime">
            <el-date-picker size="medium" v-model="formCoupon.start_datetime" type="datetime" placeholder="开始时间"
              default-time="12:00:00">
            </el-date-picker>
          </el-form-item>
        </div>
        <div>
          <el-form-item label="过期时间" prop="end_datetime">
            <el-date-picker v-model="formCoupon.end_datetime" type="datetime" placeholder="过期时间"
              default-time="12:00:00">
            </el-date-picker>
          </el-form-item>
        </div>
        <div>
          <el-form-item label="使用范围" prop="end_datetime">
            <el-select v-model="formCoupon.coupon_range" placeholder="请选择">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </div>
        <div style="width: 40%;">
          <el-form-item label="优惠券说明" prop="description">
            <el-input type="textarea" rows="5" v-model="formCoupon.description" placeholder="优惠券说明"></el-input>
          </el-form-item>
        </div>
        <div class="row" style="width: 80%;margin-top: 20px;">
          <el-form-item>
            <el-button plain @click="submitForm('drafts')">保存到草稿</el-button>
            <el-button type="primary" @click="addCoupon('submit')">保存并提交</el-button>
          </el-form-item>
        </div>
      </el-form>
    </div>
  </d2-container>
</template>

<script>
  import {
    couponCreateUrl,
    couponUpdateUrl,
    couponDetailUrl
  } from '@/utils/promotion'
  import util from '@/libs/util.js'
  export default {
    data() {
      return {
        modifyStatus: false,
        queryInfo: {
          page: 1
        },
        options: [{
          value: 0,
          label: '全部商品'
        }, {
          value: 1,
          label: '部分商品'
        }],
        formCoupon: {
          title: '',
          description: '',
          start_datetime: '',
          end_datetime: '',
          merchant: util.cookies.get('merchantId'),
          coupon_count: '',
          coupon_residue: '',
          coupon_residue: '',
          discount_amount: '',
          minimum_order_amount: '',
          coupon_range: '',
          coupon_examine: 0,
        }
      }
    },
    mounted() {
      if (this.$route.query.couponId) {
        this.getCouponId = this.$route.query.couponId
        this.modifyStatus = true
        this.getCouponDetail()
      }
    },
    methods: {
      getCouponDetail() {
        this.$get(couponDetailUrl + this.getCouponId + '/').then(res => {
          if (res.data.code == 200) {
            this.formCoupon = {
              title: res.data.data.title,
              description: res.data.data.description,
              start_datetime: res.data.data.start_datetime,
              end_datetime: res.data.data.end_datetime,
              coupon_count: res.data.data.coupon_count,
              coupon_residue: res.data.data.coupon_residue,
              coupon_residue: res.data.data.coupon_residue,
              discount_amount: res.data.data.discount_amount,
              minimum_order_amount: res.data.data.minimum_order_amount,
              coupon_range: res.data.data.coupon_range,
              user: res.data.data.user,
              merchant: res.data.data.merchant,
            }
          }
        })
      },
      addCoupon() {
        if (this.modifyStatus) {
          this.$put(couponUpdateUrl + this.getCouponId + '/', this.formCoupon).then(res => {
            if (res.data.code == 200) {
              this.$message.success('修改成功')
              this.formCoupon = {}
              setTimeout(() => {
                this.$router.go(-1)
              }, 300) // 延迟1秒执行
            }
          })
        } else {
          this.$post(couponCreateUrl, this.formCoupon).then(res => {
            if (res.data.code == 200) {
              this.$message.success('添加成功')
              this.formCoupon = {}
              setTimeout(() => {
                this.$router.go(-1)
              }, 300) // 延迟1秒执行
            }
          })
        }
      }
    }
  }
</script>

<style>
</style>